<template>
  <div v-loading="loading">
    <search-head :search-data="searchData" @search="handleCurrentChange(1)" @reset="reset" />
    <ess-table
      ref="essTableRef"
      :thead-list="theadList"
      :other-container-box="otherContainerBox"
      :resize-observer-ele="resizeObserverEle"
      :page-num="searchData.pageNum - 1 + 2"
      :total="total"
      :data-list="dataList"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @selectionChange="selectionChange"
    >
      <div slot="left" class="mb-8">
        未线上建品清单
      </div>
      <div slot="right" class="mb-8">
        <b>批量操作：</b>
        <el-button :disabled="!multipleSelection.length" :loading="initiateTaskBtnLoading" size="mini" type="primary" style="margin-left:5px;" icon="el-icon-plus" round @click="initiateTaskRequery">发起线上建品</el-button>
      </div>
    </ess-table>
  </div>
</template>

<script>
import searchHead from '../components/newItemSearchHead.vue'
import essTable from '@/components/eTable/eTable.vue'
import { newItemtable } from '@/views/coi/commonJs/tableHeadList.js'
import { scheduleListID } from '@/views/coi/commonJs/tableHeadList.js'
import { newItemList, initiateTask } from '@/api/coi/onlineTaskAPI/sku'
import { stringToArray } from '@/utils/processingData'

export default {
  name: 'OnlineNewItemList',
  components: {
    searchHead,
    essTable
  },
  data() {
    return {
      searchData: {}, // 请求参数
      theadList: newItemtable, // 表头数据
      dataList: [], // 列表展示数据
      total: 0, // 列表总数
      loading: false,
      multipleSelection: [], // 勾选中的数据
      initiateTaskBtnLoading: false, // 发起按钮loading
      otherContainerBox: ['.app-container', '.checkComponent'],
      resizeObserverEle: ['.app-main', '.app-container']
    }
  },
  created() {
    this.initalData()
    this.queryData()
  },
  methods: {
    // 初始化数据
    initalData() {
      const searchData = {
        pageNum: 0,
        pageSize: 10
      }
      this.searchData = searchData
    },
    // 分页器
    handleCurrentChange(val) {
      this.searchData.pageNum = val - 1
      this.queryData()
    },
    handleSizeChange(val) {
      this.searchData.pageSize = val
      this.handleCurrentChange(1)
    },
    selectionChange(val) {
      this.multipleSelection = val
    },
    // 处理请提数据
    handleData() {
      const searchData = JSON.parse(JSON.stringify(this.searchData))

      searchData.skuList = stringToArray(searchData.skuList, /[\n\r]/)
      searchData.vendorNbr6List = stringToArray(searchData.vendorNbr6List, /[\n\r]/)
      searchData.deptNbrList = stringToArray(searchData.deptNbrList, /[\n\r]/)

      return searchData
    },
    // 请求数据
    async queryData() {
      try {
        this.loading = true
        const { result } = await newItemList(this.handleData())
        if (result) {
          this.total = result.total
          this.dataList = result.data
          // this.dataList.forEach((item) => {
          // })
        }
      } finally {
        this.loading = false
      }
    },
    // 重置数据
    reset() {
      this.initalData()
      this.$refs.essTableRef.clearSelection()
      this.handleCurrentChange(1)
    },
    async initiateTaskRequery() {
      try {
        if (this.multipleSelection.lngth > 500) {
          return this.$message({
            type: 'error',
            message: '发起线上建品的最大数量不能超过500'
          })
        }
        const idList = this.multipleSelection.map(item => item.id)
        this.initiateTaskBtnLoading = true
        const { result } = await initiateTask(idList)
        if (result) {
          this.$message({
            type: 'success',
            message: result
          })
          this.$refs.essTableRef.clearSelection()
          this.handleCurrentChange(1)
          this.$router.push({
            name: 'OnlineBuildingTasks',
            params: {
              tab: 'scheduleList',
              type: scheduleListID.processingTasks
            }
          })
        }
      } finally {
        this.initiateTaskBtnLoading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.mb-8{
  margin-bottom:8px ;
}
</style>
